<template>
    <v-touch @swipeleft="swipeLeft" @tap="resetRemarkFn">
        <div class="remark-item-outter">
            <div class="remark-item-inner" :class="{'remark-item-inner-move': showdelete}">
                <div class="remark-index">{{remarkIndex}}</div>
                <div class="remark-content">
                    <slot></slot>
                </div>
                <div class="remark-delete" @click.self="cutRemark">
                    删除
                </div>
            </div>
        </div>
    </v-touch>
</template>

<script type="text/ecmascript-6">
    export default {
        props: {
            resetRemark: Function,
            cut: Function,
            remarkId: String,
            target: Function,
            remarkIndex: Number,
            showDelete: Boolean,
            hideDelete: Function
        },
        data(){
            return {
                showdelete: false,//是否动画显示删除按钮
            }
        },
        watch: {
            showDelete: function (n, o) {
                console.log('watch');
                this.showdelete = false;
            }
        },
        methods: {
            swipeLeft(){
                this.showdelete = true;
            },
            resetRemarkFn(){
                this.target(this.remarkId);
                this.resetRemark()
            },
            cutRemark(){
                console.log(111);
                this.cut(this.remarkId);
            }
        }
    }
</script>

<style lang="scss">
    @import "../../assets/css/common.scss";
    .remark-item-outter{
        width: rem(395);
        height: rem(70);
        line-height: rem(25);
        overflow: hidden;
        .remark-item-inner{
            width: rem(465);
            height: rem(70);
            margin-left: rem(12);
            border-bottom: rem(1) solid #ccc;
            clear: both;
            overflow: hidden;
            transition: all 0.1s;
            >div{
                 float: left;
            }
        }
        div.remark-item-inner-move{
            transform: translateX(rem(-70));
        }
        .remark-index{
            width: rem(20);
            height: rem(70);
            margin-top: rem(9);
            text-align: center;
            line-height: rem(25);
            font-size: rem(16);
        }
        .remark-content{
            width: rem(350);
            height: rem(50);
            margin: rem(9) rem(14) rem(9) 0;
            font-size: rem(14);
        }
        .remark-delete{
            width: rem(70);
            height: rem(70);
            background-color: red;
            text-align: center;
            line-height: rem(70);
        }
    }
</style>
